import React, { Component } from 'react';
import { connect } from 'react-redux';

const _ = require('lodash');

class Info extends Component {
	render() {
		let { info } = this.props;
		const tableSource = info.properties || [];
		const title = info.labels && info.labels[0] || '';
		return <table className="info" style={{borderCollapse: 'collapse'}}>
			<thead>
				<tr><th style={{textAlign: 'left'}}>{title}</th><th></th></tr>
			</thead>
			<tbody>	
		  {
		  	_.toPairs(tableSource).map((d,i) => <tr key={i}>
		  			<td>{d[0]}</td>
		  			<td>{d[1]}</td>
		  		</tr>)
		  }
		  </tbody>
		</table>;
	}
} 


function mapState2Props(state) {
	let { graphData: {info} } = state;
	return { info };
}

Info = connect(mapState2Props)(Info);

export default Info;